<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="文档分类" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>

        <view class="coreshop-bg-white coreshop-margin-10">
            <view class="coreshop-padding-top-10 coreshop-padding-bottom-10 coreshop-padding-left-10 coreshop-padding-right-10">

                <view class="list-grid" v-for="item in articleType" :key="item.id" @click="goArticleClassify(item.id)">
                    <u-button type="primary" :text="item.name"></u-button>
                </view>

            </view>
        </view>
        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>
    </view>
</template>

<script>

    export default {

        data() {
            return {
                articleType: [],
            };
        },
        onLoad() {
            this.articleClassify();
        },
        methods: {
            articleClassify() {
                this.$u.api.articleClassify().then(res => {
                    if (res.status) {
                        this.articleType = res.data;
                    } else {
                        // 接口请求出错了
                        this.$u.toast(res.msg);
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .list-grid { padding: 10px; }
</style>
